<script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
import { ref } from 'vue';

defineOptions({
  name: 'TableColumnSize'
});

const sizeValue = defineModel<string>('sizeValue', {
  required: true
});

const size = ref(sizeValue);
const sizes = [
  { label: '紧凑', value: 'small' },
  { label: '默认', value: 'medium' },
  { label: '宽松', value: 'large' }
];
const handleOnUpdateValue = (value: any) => {
  console.log(value);
  sizeValue.value = value.value;
};
</script>

<template>
  <!--
 <NPopover placement="bottom-end" trigger="click">
    <template #trigger>
      <NButton size="small">
        <template #icon>
          <SvgIcon icon="fluent:text-density-16-regular" />
        </template>
      </NButton>
    </template>
    <div v-for="item in sizes" :key="item.value" class="h-36px flex-y-center hover:(bg-primary bg-opacity-20)">
      <div class="cursor-pointer font-size-4">
        {{ item.label }}
      </div>
    </div>
  </NPopover>
-->
  <NPopselect v-model:value="size" :options="sizes" trigger="click" :on-update-value="handleOnUpdateValue">
    <NButton size="small">
      <template #icon>
        <SvgIcon icon="fluent:text-density-16-regular" />
      </template>
    </NButton>
  </NPopselect>
</template>

<style scoped></style>
